<template>
  <view class="pages">
    <view class="order-card order-info w100">
      <view class="tit">
        <view class="top-t">
          <image src="/static/home/icon-order-mobile.png"></image>
          <view class="text">手机订单（{{info.kuaidi_type == 1?'直寄':'转寄'}}）</view>
          <view v-if="info.status" class="status" :class="'status' + info.status">{{statusParm(info.status)}}</view>
        </view>
        <view class="top-b">
          <image src="/static/order/icon-order-price.png"></image>
          <view class="text">
            <text>回收价：</text>
            <text class="price">{{custompayment.price}}元</text>
            <!-- <view class="icon" v-if="info.status == 6">
              <u-icon name="arrow-upward" color="#fff" size="20"></u-icon>
              <text class="num">20</text>
            </view> -->
          </view>
        </view>
      </view>
      <view class="box">
        <view class="text">
          <text>手机型号：</text>
          <text>{{info.product_name}}</text>
        </view>
        <view class="text">
          <text>颜色：</text>
          <text>{{info.colour}}</text>
        </view>
        <view class="text">
          <text>内存：</text>
          <text>{{info.memory}}</text>
        </view>
        <view class="text" v-if="info.imei!=''">
          <text>序列号：</text>
          <text>{{info.imei}}</text>
        </view>
      </view>
    </view>
    <view class="order-card order-img w100" v-if="info.imeiimg && info.imeiimg.length>0">
      <view class="tit">序列号照片：</view>
      <view class="box">
        <image mode="aspectFill" v-for="(item, index) in info.imeiimg" :src="item" :key="index"
          @click="preview(info.imeiimg,index)"></image>
      </view>
    </view>
    <view class="order-card order-img w100" v-if="info.packimg && info.packimg.length>0">
      <view class="tit">详情照片：</view>
      <view class="box">
        <image mode="aspectFill" v-for="(item, index) in info.packimg" :src="item" :key="index"
          @click="preview(info.packimg,index)"></image>
      </view>
    </view>
    <view class="order-card order-ramark w100">
      <view class="tit">备注：</view>
      <view class="box">
        {{info.other || '无'}}
      </view>
    </view>
    <view class="order-card order-form w100" v-if="info.custom_payment">
      <view class="tit">
        <view class="l">
          <text>收款信息</text><u-icon name="info" color="#fff" size="22"></u-icon>
        </view>
      </view>
      <view class="box">
        <u--form labelPosition="left" :model="custompayment" ref="uForm" labelWidth="155" :labelStyle="labelStyle">
          <u-form-item label="姓名：" required>
            <u--input readonly v-model="custompayment.name" border="surround" placeholder="请输入收款人姓名"></u--input>
          </u-form-item>
          <u-form-item label="手机号：" required>
            <u--input readonly v-model="custompayment.mobile" border="surround" placeholder="请输入收款人手机号"></u--input>
          </u-form-item>
          <u-form-item label="身份证：" required v-if="custompayment.type == 1">
            <u--input readonly v-model="custompayment.card" border="surround" placeholder="请输入收款人身份证"></u--input>
          </u-form-item>
          <!--          <u-form-item :label="custompayment.type == 1?'银行卡：':'支付宝：'" required>
            <u--input readonly v-model="custompayment.accountnumber" border="surround"
              placeholder="请输入收款人银行卡号"></u--input>
          </u-form-item> -->
          <u-form-item v-if="custompayment.type == 1" label="银行卡：" required>
            <u--input v-model="custompayment.accountnumber" border="surround" placeholder="请输入收款人银行卡号"
              :readonly="isInput"></u--input>
          </u-form-item>
          <u-form-item v-if="custompayment.type == 2" label="收款码图：" required>
            <u-upload :fileList="accountnumberImgList" :deletable="false" name="1" width="120" height="120"
              :maxCount="1" :previewFullImage="true"></u-upload>
          </u-form-item>
        </u--form>
      </view>
    </view>
    <view class="order-card order-form w100" v-if="info.pick && info.kuaidi_type == 1">
      <view class="tit">
        <view class="l">
          <text>取件地址</text>
        </view>
      </view>
      <view class="box">
        <u--form labelPosition="left" :model="pick" ref="uForm" labelWidth="155" :labelStyle="labelStyle">
          <u-form-item label="取件人：" required>
            <u--input readonly v-model="pick.name" border="surround" placeholder="请输入姓名"></u--input>
          </u-form-item>
          <u-form-item label="取件电话：" required>
            <u--input readonly v-model="pick.mobile" border="surround" placeholder="请输入手机号"></u--input>
          </u-form-item>
          <!-- <u-form-item label="取件地址：" required>
            <u--input v-model="pick.pca_address" border="surround" readonly placeholder="请选择取件地址"></u--input>
          </u-form-item> -->
          <u-form-item label="取件地址：" required>
            <u--input readonly v-model="pick.address" border="surround" placeholder="请输入详细地址"></u--input>
          </u-form-item>
          <u-form-item label="预约日期：" required>
            <view @click="showDate = true"><u--input v-model="pick.timeday" readonly border="surround"></u--input>
            </view>
          </u-form-item>
          <u-form-item label="预约时间：" required>
            <view><u--input v-model="pick.starttime" readonly border="surround" placeholder="开始时间"></u--input></view>
            <view slot="right"><u--input v-model="pick.endtime" readonly border="surround"
                placeholder="结束时间"></u--input></view>
          </u-form-item>
        </u--form>
      </view>
    </view>
    <view class="bottom-box fixed-bottom" v-if="info.status == 1">
      <u-button type="error" @click="cancelBtn">取消订单</u-button>
      <u-button type="primary" @click="sumbit">确认无误</u-button>
    </view>
    <!-- 取消弹窗提示 -->
    <u-modal :show="showClose" :showCancelButton="true" @confirm="confirmClose" @cancel="cancelClose">
      <view class="slot-content">
        <view class="box">
          <u-icon name="info-circle-fill" color="#fa3534" size="80"></u-icon>
          <text class="text">取消订单后将无法进行后续的回收流程，确认要取消订单？</text>
        </view>
      </view>
    </u-modal>
    <!-- 确认类弹窗提示 -->
    <u-modal :show="showConf" :showCancelButton="true" @confirm="confirmConf" @cancel="cancelConf">
      <view class="slot-content">
        <view class="box">
          <u-icon name="info-circle-fill" color="#fa3534" size="80"></u-icon>
          <text class="text">请仔细确认您填写的信息，提交将无法修改，确认提交？</text>
        </view>
      </view>
    </u-modal>
    <MobileModal ref="isLoginModal" @tapLogin="reload" />
  </view>
</template>

<script>
  import MobileModal from '@/components/MobileModal'
  export default {
    components: {
      MobileModal
    },
    data() {
      return {
        id: '',
        code: '',
        stepsTexts: ['出价', '确认', '上门', '完成'],
        stepsIndex: 0,
        info: {},
        labelStyle: {
          fontSize: "24rpx",
          color: "#666",
        },
        accountnumberImgList: [],
        custompayment: {
          type: '',
          name: '',
          mobile: null,
          card: null,
          accountnumber: '',
          price: '',
        },
        userpayment: {
          name: '',
          mobile: '',
          card: '',
          accountnumber: '',
          price: '',
        },
        pick: {
          name: '',
          mobile: '',
          // pca_address: '',
          address: '',
          timeday: '',
          starttime: '',
          endtime: '',
        },
        showDate: false,
        showTime: false,
        timeText: '',
        custompaymentTypes: [{
          label: '银行卡',
          id: 1

        }, {
          label: '支付宝',
          id: 2
        }],
        title: '提示',
        showClose: false, //取消提示弹窗
        showConf: false, //确认类提示弹窗
        showSubmit: false, //提交收款信息提示
        modalType: '', //提示弹窗类型
      }
    },
    onLoad(option) {
      if (option.id) this.id = option.id
      this.getDetail()
    },
    methods: {
      changeTime(name) {
        this.timeText = name
        this.showTime = true
      },
      confirmTime(e) {
        this.pick[this.timeText] = e.value
        this.showTime = false
      },
      async getDetail() {
        const res = await this.$http('/order/confirmDetail', {
          id: this.id
        })
        this.info = res.info
        if (this.info.custom_payment) {
          this.custompayment.type = this.info.custom_payment.type
          this.custompayment.name = this.info.custom_payment.name
          this.custompayment.mobile = this.info.custom_payment.mobile
          this.custompayment.card = this.info.custom_payment.card
          this.custompayment.accountnumber = this.info.custom_payment.accountnumber
          this.custompayment.price = this.info.custom_payment.price
          if (this.info.custom_payment.type == 2) {
            this.accountnumberImgList = [{
              url: this.info.custom_payment.accountnumber
            }]
          }
        }
        if (this.info.pick) {
          this.pick.name = this.info.pick.name
          this.pick.mobile = this.info.pick.mobile
          // this.pick.pca_address = this.info.pick.pca_address
          this.pick.address = this.info.pick.address
          this.pick.timeday = this.info.pick.timeday
          this.pick.starttime = this.info.pick.starttime
          this.pick.endtime = this.info.pick.endtime
        }
      },
      // 解析订单状态
      statusParm(status) {
        const statusList = [{
            id: -1,
            label: "已取消"
          },
          {
            id: 0,
            label: "待出价"
          },
          {
            id: 1,
            label: "待确认"
          },
          {
            id: 2,
            label: "待上门"
          },
          {
            id: 3,
            label: "待打款"
          },
          {
            id: 4,
            label: "已打款"
          },
          {
            id: 5,
            label: "待最终报价"
          },
          {
            id: 6,
            label: "已完成"
          }
        ]
        return statusList[statusList.findIndex(item => item.id == status)].label
      },
      // 预览图
      preview(arr, index) {
        uni.previewImage({
          urls: arr,
          current: index,
        });
      },
      // 取消订单操作
      cancelBtn() {
        this.showClose = true
      },
      // 取消订单的确认操作
      confirmClose() {
        this.showClose = false
        this.cancelOrder()
      },
      // 取消弹窗
      cancelClose() {
        this.showClose = false
      },
      // 确认/提交弹窗的confirm操作
      confirmConf() {
        this.showConf = false
        if (this.info.status == 1 && this.info.payment_path == 1) this.update()
      },
      // 确认/提交弹窗的cancel操作
      cancelConf() {
        this.showConf = false
      },

      // 取消订单请求
      async cancelOrder() {
        if (this.code == '' || !this.code) return this.$refs.isLoginModal.open();
        const res = await this.$http('/order/customCancel', {
          order_id: this.id,
          code: this.code
        })
        this.$f.successToast('取消订单成功')
        this.getDetail()
      },
      // 确认订单
      async sumbit() {
        if (this.code == '' || !this.code) return this.$refs.isLoginModal.open();
        const form = {
          order_id: this.id,
          code: this.code,
        }
        const res = await this.$http('/order/confirm', form)
        this.$f.successToast('确认成功')
        this.getDetail()
      },
      // 登录后刷新数据
      reload(e) {
        this.code = e
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pages {
    background: linear-gradient(#cce4fb, #f0f4fa);
    padding: 16rpx 16rpx calc(124rpx + #{$safe});
  }

  .order-card {
    background-color: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
  }

  .order-steps {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 24rpx 40rpx;
    font-size: 24rpx;

    .tit {
      color: #999;
    }

    .item-1 {
      color: #1e1136;
      padding-left: 14rpx;
    }

    .item {
      display: flex;
      align-items: center;

      ::v-deep .u-icon__icon {
        margin: 0 14rpx !important;
        padding: 4rpx !important;
        border-radius: 30rpx !important;
        background-color: #ccc !important;
        font-weight: 700 !important;
      }

      &.active ::v-deep .u-icon__icon {
        background-color: #fa3534 !important;
      }
    }
  }


  .order-info {
    overflow: hidden;

    .tit {
      background: linear-gradient(#41a2ff, #79b2fe);

      padding: 30rpx 36rpx 30rpx 29rpx;
      color: #fff;
      font-size: 26rpx;


      .top-t {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 55rpx;
        line-height: 55rpx;

        image {
          width: 33rpx;
          height: 33rpx;
        }

        .text {
          width: 473rpx;
        }

        .status {
          padding: 0rpx 20rpx;
          border-radius: 30rpx;
          background-color: #fff;
          font-size: 24rpx;
          font-weight: 700;
        }

        .status-1 {
          color: #909399;
        }

        .status0 {
          color: #fa3534;
        }

        .status1 {
          color: #fa3534;
        }

        .status2 {
          color: #fa3534;
        }

        .status3 {
          color: #fa3534;
        }

        .status4 {
          color: #fa3534;
        }

        .status5 {
          color: #fa3534;
        }

        .status6 {
          color: #19be6b;
        }
      }

      .top-b {
        padding-top: 34rpx;
        height: 33rpx;
        line-height: 33rpx;
        display: flex;
        align-items: center;
        position: relative;

        image {
          width: 33rpx;
          height: 33rpx;
        }

        .text {
          padding-left: 18rpx;
          width: 300rpx;

          .price {
            font-weight: 700;
            color: #fa3534;
          }

          .icon {
            position: absolute;
            top: 0;
            left: 210rpx;
            display: flex;
            align-items: center;
            font-size: 22rpx;

            .num {
              padding-left: 4rpx;
            }
          }
        }

        .status {
          width: 300rpx;
          font-size: 24rpx;
          text-align: right;
        }
      }

    }

    .box {
      padding: 20rpx 38rpx;

      .text {
        line-height: 56rpx;
        display: flex;
        align-items: center;
        color: #1d1715;
        font-size: 26rpx;

        text:first-child {
          width: 154rpx;
          color: #ccc;
        }
      }
    }

    .operate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 24rpx 28rpx 38rpx;

      .time {
        color: #999;
        font-size: 22rpx;
      }

      .btn {
        button {
          padding: 19rpx 44rpx;
          border-radius: 60rpx;
          background-color: #ecf6ff;
          color: #1890ff;
          font-size: 24rpx;
        }
      }
    }
  }

  .order-img {
    margin-top: 16rpx;
    padding: 26rpx 38rpx 0;
    display: flex;

    .tit {
      width: 170rpx;
      color: #ccc;
      padding-top: 46rpx;
    }

    .box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      image {
        width: 140rpx;
        height: 124rpx;
        border-radius: 8rpx;
        margin-right: 26rpx;
        margin-bottom: 26rpx;

        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }

  .order-ramark {
    margin-top: 16rpx;
    padding: 26rpx 38rpx;
    display: flex;

    .tit {
      width: 154rpx;
      color: #ccc;
      padding-top: 14rpx;
    }

    .box {
      line-height: 56rpx;
      color: #1d1715;
      font-size: 26rpx;
    }
  }

  .order-form {
    margin-top: 16rpx;
    padding: 34rpx;

    .tit {
      padding-bottom: 16rpx;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .l {
        display: flex;
        align-items: center;

        ::v-deep .u-icon__icon {
          margin-left: 6rpx !important;
          padding: 4rpx !important;
          border-radius: 30rpx !important;
          background-color: #fa3534 !important;
        }
      }

      .r {
        color: #2979ff;
      }
    }

    .box {
      ::v-deep .u-input {
        padding: 2px 9px !important;
        background-color: #f4f8ff !important;
      }

      ::v-deep .u-border {
        border-color: #f4f8ff !important;
      }

      ::v-deep input {
        font-size: 24rpx !important;
      }

      ::v-deep .item__body__right__content__icon {
        padding-left: 20rpx !important;
        width: 240rpx !important;
      }

      ::v-deep .u-button--mini {
        width: 240rpx !important;
        height: 58rpx !important;
        justify-content: start;
      }
    }
  }

  .bottom-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    ::v-deep .u-button {
      border-radius: 80rpx;

      &:nth-child(2) {
        margin-left: 16rpx;
      }
    }
  }
</style>
